<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="配置代码:" prop="configNo">
          <el-input
            v-model="formModel.configNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button v-if="hasPermission('vehicleConfigNo_select')" type="primary" plain @click="queryList(false)">查询
            </el-button>
            <el-button v-if="hasPermission('vehicleConfigNo_add')" type="primary" plain @click="handleAdd">新增
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3>配置代码:</h3>
    <hey-table
      ref="table"
      :table-data="tableData"
      :columns="columns"
      :is-radio="true"
      :auto-width="false"
      @row-click="handleRowClick"
    >
      <template slot="tools">
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="hasPermission('vehicleConfigNo_edit')" class="hey_tools_btn" @click="handleEdit(row)">编辑</span>
            <span
              v-if="hasPermission('vehicleConfigNo_delete')"
              class="hey_tools_btn"
              @click="handleDelete(row)"
            >删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <div class="filter-container">
      <el-row class="submit-area">
        <el-col :span="24">
          <el-button v-if="hasPermission('vehicleConfigItemNo_add')" type="primary" plain @click="handleAddItem">新增配置项代码
          </el-button>
        </el-col>
      </el-row>
    </div>
    <h3>配置项代码:</h3>
    <hey-table
      ref="tableItem"
      :table-data="tableItemData"
      :columns="itemColumns"
      :is-select="false"
    >
      <template slot="tools">
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="hasPermission('vehicleConfigItemNo_edit')" class="hey_tools_btn" @click="handleEditItem(row)">编辑</span>
            <span v-if="hasPermission('vehicleConfigItemNo_delete')" class="hey_tools_btn" @click="handleDeleteItem(row)">删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <!--    配置代码新增修改页面-->
    <el-dialog
      v-if="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      title="配置代码"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <VehicleConfigNo-mnt :page-type="operType" :edit-data="editData" @mntSuc="queryList" />
    </el-dialog>
    <!--    配置项代码新增修改页面-->
    <el-dialog
      v-if="dialogItemVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      title="配置项代码"
      :visible.sync="dialogItemVisible"
      width="60%"
    >
      <VehicleConfigItemNo-mnt :page-type="operType" :edit-data="editItemData" @mntSuc="queryItemList" />
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'VehicleConfigNoList',
  components: {
    VehicleConfigNoMnt: () => import('./vehicleConfigNo-mnt'),
    VehicleConfigItemNoMnt: () => import('./vehicleConfigItemNo-mnt')
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      dialogItemVisible: false,
      operType: '',
      editData: {},
      editItemData: {},
      tableData: [],
      tableItemData: [],
      chooseData: {},
      formModel: {
        configNo: ''
      },
      columns: [
        { title: '配置代码', key: 'configNo' },
        { title: '配置描述', key: 'configDesc' },
        { title: '状态', key: 'status', clcd: 'is_effective_cd' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime' },
        { title: '最后修改人', key: 'lastUpdateUsername' }
      ],
      itemColumns: [
        { title: '配置项代码', key: 'configItemNo' },
        { title: '零件物料编码', key: 'partMaterialNo' },
        { title: '零件物料描述', key: 'partMaterialDesc' },
        { title: '状态', key: 'status', clcd: 'is_effective_cd' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime' },
        { title: '最后修改人', key: 'lastUpdateUsername' }
      ]
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    // 点击列方法
    handleRowClick(row) {
      if (row) {
        this.chooseData = row
        if (row.status === '1') {
          this.queryItemList()
        } else {
          // 清空选中数据
          this.chooseData = {}
          // 清空子表数据
          this.tableItemData = []
        }
      } else {
        // 清空选中数据
        this.chooseData = {}
        // 清空子表数据
        this.tableItemData = []
      }
    },
    queryList() {
      // 清空选中数据
      this.chooseData = {}
      // 清空子表数据
      this.tableItemData = []
      this.$refs.table.query('/vehicleConfigNo/page', this.formModel, '', false)
    },
    queryItemList() {
      if (this.chooseData.vehicleConfigNoId) {
        const param = {}
        param.vehicleConfigNoId = this.chooseData.vehicleConfigNoId
        this.$refs.tableItem.query('/vehicleConfigItemNo/pageByVehicleConfigCodeId', param, '', false)
      } else {
        this.$warn('请先选中一条配置代码列表中启用的数据!')
      }
    },
    // 新增配置代码
    handleAdd() {
      this.operType = 'add'
      this.dialogVisible = true
    },
    // 新增配置项代码
    handleAddItem() {
      if (!this.chooseData.vehicleConfigNoId) {
        this.$warn('请先选中一条配置代码列表中启用的数据!')
        return
      }
      this.operType = 'add'
      this.editItemData = this.chooseData
      console.log(this.editItemData)
      this.dialogItemVisible = true
    },
    // 修改配置代码
    handleEdit(row) {
      this.dialogVisible = true
      this.operType = 'edit'
      this.editData = row || {}
    },
    // 修改配置项代码
    handleEditItem(row) {
      if (!this.chooseData.vehicleConfigNoId) {
        this.$warn('请先选中一条配置代码列表中启用的数据!')
        return
      }
      this.dialogItemVisible = true
      this.operType = 'edit'
      this.editItemData = row || {}
    },
    // 删除配置代码
    handleDelete(row) {
      this.$sure('确认配置代码删除？', _ => {
        this.post('vehicleConfigNo/delete', { vehicleConfigNoId: row.vehicleConfigNoId }).then(_ => {
          this.$info('删除成功', this.queryList)
        })
      })
    },
    // 删除配置项代码
    handleDeleteItem(row) {
      this.$sure('确认配置项代码删除？', _ => {
        this.post('vehicleConfigItemNo/delete', { vehicleConfigItemNoId: row.vehicleConfigItemNoId }).then(_ => {
          this.$info('删除成功', this.queryItemList)
        })
      })
    }
  }
}
</script>

